<template>
<div>
  <div>
    <el-input
        type="text"
        placeholder="客户电话"
        v-model="customPhone"
        style="width: 180px;float: left;padding-left: 10px"
        clearable></el-input>&nbsp;&nbsp;
    <el-select v-model="state" clearable placeholder="请选择订单状态" style="float: left;padding-left: 10px">
      <el-option
          v-for="item in stateList"
          :key="item.id"
          :label="item.name"
          :value="item.name"
          style="float: left">
      </el-option>
    </el-select>
    <el-button type="primary" icon="el-icon-search"  @click="select" style="margin-left: -100px">搜索</el-button>&nbsp;&nbsp;
    <el-button type="primary" @click="deleteMany"  style="margin-left: 10px">批量删除</el-button>&nbsp;&nbsp;
  </div>
  <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
  >
    <el-table-column
        type="selection"
        width="55">
    </el-table-column>
    <el-table-column
        prop="no"
        label="订单编号"
        width="100">
    </el-table-column>
    <el-table-column
        prop="orderTime"
        label="下单时间"
        width="100">
    </el-table-column>
    <el-table-column
        prop="goodsName"
        label="商品名称"
        width="100">
    </el-table-column>
    <el-table-column
        prop="customPhone"
        label="下单电话"
        width="100">
    </el-table-column>
    <el-table-column
        prop="shippingAddress"
        label="配送地址"
        width="180">
    </el-table-column>
    <el-table-column
        prop="shopName"
        label="店铺名称"
        width="100">
    </el-table-column>
    <el-table-column
        prop="goodsNum"
        label="商品数量"
        width="100">
    </el-table-column>
    <el-table-column
        prop="goodsAmount"
        label="订单价格"
        width="100">
    </el-table-column>
    <el-table-column
        prop="state"
        label="订单状态"
        :style="bgColor"
        width="100">
    </el-table-column>
    <el-table-column
        prop="completionTime"
        label="完工时间"
        width="100">
    </el-table-column>
    <el-table-column
        prop="courier"
        label="配送员"
        width="100">
    </el-table-column>
    <el-table-column
        prop="remark"
        label="备注"
        width="100">
    </el-table-column>
  </el-table>
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="curPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="viewNum"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalNum">
  </el-pagination>
</div>
</template>

<script>
export default {
  name: "historicalOrders",
  data(){
    return {
      customPhone:'',
      state:'',
      tableData:[],
      curPage:1,
      viewNum:5,
      totalNum:0,
      bgColor: {
        backgroundColor:''
      },
      stateList:[
        {
          id:1,
          name:'已完工',
          color:'#00FF00'
        },
        {
          id:2,
          name:'已撤销',
          color:'#FF7F00'
        },
        {
          id:3,
          name:'超时完工',
          color:'#FF0000'
        }
      ],

    }
  },
  methods: {
    //加载表格数据
    async query(){
      let resp = await this.$axios.get('/historicalOrders/queryByPage',{
        params:{
          curPage:this.curPage,
          pageSize:this.viewNum,
          customPhone:this.customPhone,
          state:this.state
        }
      })
      this.tableData = resp.data.data
      this.totalNum=resp.data.total
    },
    //更换每页最大记录数
    handleSizeChange(val) {
      this.viewNum=val
      this.query()
    },
    //切换当前页
    handleCurrentChange(val) {
      this.curPage=val
      this.query()
    },
    //删除
    handleDelete(row) {
      this.$confirm('此操作将永久删除该成员国, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then( async () => {
        let resp=await this.$axios.get('/historicalOrders/drop?id='+row.id)
        if(resp.data.code===200){
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.query()
        }else{
          this.$message({
            type: 'error',
            message: '删除失败!'
          });
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //新增
    save(){
      this.$router.push("/editHistoricalOrders")
    },

    //多条件查询
    select(){
      this.curPage=1
      this.query()
    },
    //批量删除
    async deleteMany(){
      let selected = this.$refs.multipleTable.selection;
      if(selected.length===0){
        this.$message({
          message: '你还没有选择要删除的订单',
          type: 'warning'
        });
        return
      }
      let ids='?'
      for (let i = 0; i < selected.length; i++) {
        ids+='id='+selected[i].id+'&'
      }
      ids=ids.substring(0,ids.length-1)
      this.$confirm('此操作将永久删除您选中的历史订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then( async () => {
        let resp=await this.$axios.get('/historicalOrders/drop'+ids)
        if(resp.data.code===200){
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.query()
        }else{
          this.$message({
            type: 'error',
            message: '删除失败!'
          });
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  },
  created: async function () {
    this.query()
  }

}
</script>

<style scoped>

</style>